<template>
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
            <el-form-item label="审批结果" prop="approvalStatus">
                <el-radio-group v-model="form.approvalStatus">
                    <el-radio v-for="dict in dict.type.stock_approval_status" :key="dict.value" :label="dict.value">
                        {{ dict.label }}
                    </el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="审批意见" prop="approvalRemark">
                <el-input v-model="form.approvalRemark" type="textarea" placeholder="请输入审批意见" />
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitForm">确 定</el-button>
            <el-button @click="cancel">取 消</el-button>
        </div>
    </el-dialog>
</template>

<script>
export default {
    name: "RecordApprove",
    dicts: ['stock_approval_status'],
    props: {
        // 是否显示弹出层
        open: {
            type: Boolean,
            default: false
        },
        // 弹出层标题
        title: {
            type: String,
            default: ""
        },
        // 表单参数
        form: {
            type: Object,
            default: () => {
                return {
                    id: null,
                    approvalStatus: "1",
                    approvalRemark: null
                };
            }
        }
    },
    data() {
        return {
            // 表单校验
            rules: {
                approvalStatus: [
                    { required: true, message: "审批结果不能为空", trigger: "change" }
                ],
                approvalRemark: [
                    { required: true, message: "审批意见不能为空", trigger: "blur" }
                ]
            }
        };
    },
    methods: {
        /** 提交按钮 */
        submitForm() {
            this.$refs["form"].validate(valid => {
                if (valid) {
                    this.$emit('submit', this.form);
                }
            });
        },
        /** 取消按钮 */
        cancel() {
            this.$emit('cancel');
        }
    }
};
</script>

<style lang="scss" scoped>
.record-approve {
    .el-form-item {
        margin-bottom: 20px;
    }
}
</style>